<template>
  <div class="card">
    <a-spin :spinning="loading">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item
          v-for="(item, index) in rule"
          :key="index"
          :label="`激活码规则${index + 1} 购买人级别-赠送级别-数量-过期天数`"
        >
          <div class="reimburse">
            <a-select class="inputStyle" v-model="item.buy_level_id" placeholder="购买人级别">
              <a-select-option v-for="item in levelType" :key="item.id" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
            <a-select class="inputStyle" v-model="item.give_level_id" placeholder="购买人级别">
              <a-select-option v-for="item in levelType" :key="item.id" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
            <a-input-number class="inputStyle" id="inputNumber" placeholder="数量" v-model="item.count" />
            <a-input-number style="width: 100%" id="inputNumber" placeholder="过期天数" v-model="item.expiry_day" />
            <a-icon
              :style="`${rule.length < 2 ? 'visibility: hidden' : ''}`"
              @click="delRow(index)"
              class="minus-circle"
              type="minus-circle"
            />
          </div>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <div style="display: flex">
            <a-button style="width: 100%" type="dashed" icon="plus" @click="addNum()"> 新增一行 </a-button>
            <a-icon style="visibility: hidden" class="minus-circle" type="minus-circle" />
          </div>
        </a-form-item>
      </a-form>
      <a-form style="margin: 40px 0" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <a-button type="primary" style="margin-right: 10px" @click="upload">提交</a-button>
          <a-button @click="getType">重置</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import { getLevelAPI } from '@/api/follow.js'
import { getRuleListAPI, upRuleListAPI } from '@/api/product.js'
export default {
  name: 'activationCodeRules',
  data() {
    return {
      loading: false,
      rule: [],
      levelType: []
    }
  },
  created() {
    this.getType()
  },
  methods: {
    async getType() {
      try {
        this.loading = true
        const result = await getLevelAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
        const data = await getRuleListAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
        this.rule = data.data.rule
        this.levelType = result.data
      } finally {
        this.loading = false
      }
    },
    delRow(index) {
      this.rule.splice(index, 1)
    },
    addNum() {
      this.rule.push({ buy_level_id: undefined, count: '', expiry_day: '', give_level_id: undefined })
    },
    async upload() {
      await upRuleListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, rule: this.rule })
      this.getType()
      this.$message.success('操作成功')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin: 0;
}
.reimburse {
  display: flex;
}
.inputStyle {
  margin-right: 10px;
  width: 100%;
}
.minus-circle {
  margin-left: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #a8a8a8;
  font-size: 24px;
}
.minus-circle:hover {
  color: #777777;
}
</style>
